<template>
	<view class="wages">
		<view class="card ">
			<view class="card1"><txt-title title="工资构成" /></view>

			<view class="common-list " v-for="item in configItems" :key="item">
				<view class="buttons">
					<view class="tag"><u-tag size="mini" plain type="warning" :text="item.service_name"></u-tag></view>
				</view>
				<view class="img-list">
					<view class="img-title">¥{{ item.price }}</view>
					<view class="img-text">
						<text class="remarks">类型:{{ item.type }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card1"><txt-title title="当月统计" /></view>
			<view class="common-list card" v-for="(item, index) in detailsItems" :key="item.id">
				<view class="buttons">
					<view class="tag"><u-tag size="mini" plain type="warning" :text="$u.timeFormat(item.createtime, 'yyyy-mm-dd')"></u-tag></view>
				</view>
				<view class="img-list">
					<view class="img-title">工资标签:{{ item.service_name }}</view>
					<view class="img-text">
						<text class="remarks">增加工资:{{ item.money }}</text>
						<text class="remarks">备注:{{ item.memo }}</text>
					</view>
				</view>
			</view>
			<!-- 下拉刷新组件 -->
			<txt-pulldown :flagIn="flag"></txt-pulldown>
		</view>
	</view>
</template>

<script>
import { gongzi, gongzigoucheng } from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
export default {
	mixins: [onReachBottom],
	data() {
		return { detailsItems: [], configItems: [] };
	},
	methods: {
		async reqPaging() {
			if (uni.getStorageSync('userData')) {
				let userData = uni.getStorageSync('userData');
				let { data, total } = await gongzi({
					id: userData.id,
					start_time: '2022-01-01',
					end_time: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
					limit: 10,
					page: this.num
				});
				this.total = total;
				this.detailsItems = [...this.detailsItems, ...data];
			}
		}
	},
	async onShow() {
		if (uni.getStorageSync('userData')) {
			let userData = uni.getStorageSync('userData');
			let data = await gongzigoucheng({
				id: userData.id
			});
			this.configItems = data;
		}
	}
};
</script>

<style lang="scss">
.card1 {
	padding: 28rpx;
}
.common-list {
	// width: 100%;
	// height: 159rpx;
	padding: 28rpx 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 138rpx;
		height: 134rpx;
	}
	.img-list {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 23rpx;
		.img-title {
			font-size: 28rpx;
			color: #3b3a3f;
		}
		.img-text {
			display: flex;
			flex-direction: column;
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 180rpx;
		// height: 130rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.tag {
			// width: ;
		}
	}
}
</style>
